<template>
  <div>
    <div slot="com_header"><bread></bread></div>
    <div slot="com_con">
      <!-- 模态框 修改角色信息 -->

      <el-dialog title="用户信息维护" :visible.sync="dialogRole">
        <el-form :model="RoleForm">
          <el-form-item label="用户名">
            <el-input
              v-model="RoleForm.username"
              autocomplete="off"
              disabled="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="RoleForm">
          <el-form-item label="当前角色">
            <el-input
              v-model="RoleForm.role_name"
              autocomplete="off"
              disabled="true"
            ></el-input>
          </el-form-item>
          <el-select
            v-model="RoleForm.rid"
            placeholder="请选择你的活动区域？？？"
          >
            <el-option
              v-for="item in roleNames"
              :label="item.roleName"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogRole = false">取 消</el-button>
          <el-button type="primary" @click="updRole">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 模态框 修改个人信息 -->

      <el-dialog title="用户信息维护" :visible.sync="dialogSingle">
        <el-form :model="singleForm">
          <el-form-item label="用户名">
            <el-input
              v-model="singleForm.username"
              autocomplete="off"
              disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址">
            <el-input v-model="singleForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="singleForm.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogSingle = false">取 消</el-button>
          <el-button type="primary" @click="updSingle">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 模态框  添加 -->

      <el-dialog title="用户信息维护" :visible.sync="dialogFormVisible">
        <el-form :model="userForm">
          <el-form-item label="用户名">
            <el-input v-model="userForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="userForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址">
            <el-input v-model="userForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="userForm.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 条件查询框 -->
      <el-form :inline="false" :model="userForm" class="demo-form-inline">
        <el-row>
          <el-col :md="16">
            <el-form-item>
              <el-input
                v-model="userForm.query"
                placeholder="用户名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :md="2">
            <el-form-item>
              <el-button type="normal" @click="query">查询</el-button>
            </el-form-item>
          </el-col>
          <el-col :md="2">
            <el-form-item>
              <el-button type="primary" @click="open">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 数据渲染 -->
      <el-table :data="dataList" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱地址"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{ row }">
            <el-switch v-model="row.mg_state" @change="changeState(row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="primary" size="small" @click="openSingle(row)"
              ><i class="el-icon-edit"></i
            ></el-button>
            <el-button type="danger" @click="openRole(row)" size="small"
              ><i class="el-icon-s-tools"></i
            ></el-button>
            <el-button type="warning" size="small" @click="del(row)">
              <i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="userForm.pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="userForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import bread from "../../components/bread";
export default {
  components: {
    bread,
  },
  data() {
    return {
      dataList: [],
      userForm: {
        query: "",
        pagenum: 1,
        pagesize: 4,
      },
      total: 0,
      dialogFormVisible: false,
      dialogSingle: false,
      dialogRole: false,
      singleForm: {
        id: 0,
        username: "",
        password: "",
        email: "",
        mobile: "",
      },

      roleobj: {
        id: 0,
        rid: "",
        role_name: "", //当前角色名称
        username: "", //当前用户名
      },

      // 角色列表
      roleNames: [],

      //角色表单
      RoleForm: {
        id: 0,
        rid: "",
        role_name: "", //当前角色名称
        username: "",
      },
    };
  },
  mounted() {
    this.query();
    this.roleName();
  },
  methods: {
    // 获取列表数据
    async query() {
      let rst = await this.$http.get("users", this.userForm);
      let { data, meta } = rst;
      this.total = data.total;
      this.dataList = data.users;
      console.log(rst);
    },

    //分页
    handleSizeChange(val) {
      this.userForm.pagesize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.userForm.pagenum = val;
      this.query();
    },

    //  点击开关 switch
    async changeState(row) {
      let rst = await this.$http.put(`users/${row.id}/state/${row.mg_state}`);
      let { data, meta } = rst;
      if (meta.status == 200) {
        this.$message.success(meta.msg);
      }
      console.log(rst);
    },

    // 点击删除
    async del(row) {
      let b = confirm("是否确定永久删除");
      if (b) {
        let rst = await this.$http.delete(`users/${row.id}`);
        // let rst = await this.$http.delete('users',row.id);
        if (rst.meta.status == 200) {
          this.$message.success(rst.meta.msg);
        }
        this.query();
      }
    },

    // 添加用户名
    open() {
      this.dialogFormVisible = true;
    },

    // 添加
    async save() {
      let rst = await this.$http.post("users", this.userForm);
      if (rst.meta.status == 201) {
        this.$message.success(rst.meta.msg);
      }
      this.query();
      console.log(rst);
      this.dialogFormVisible = false;
    },

    // 根据ID查询
    async openSingle(row) {
      console.log(row.id);
      let rst = await this.$http.get(`users/${row.id}`);
      this.singleForm = rst.data;
      console.log(this.userForm);
      // console.log(this.userForm);
      this.dialogSingle = true;
      // console.log(rst);
    },

    // 修改角色
    async openRole(row) {
      let { id, role_name, username, rid } = row;
      // 为用户名和当前角色名赋值
      this.RoleForm.role_name = role_name;
      this.RoleForm.username = username;
      this.RoleForm.id = id;
      this.dialogRole = true;
    },

    // 修改个人信息Single
    async updSingle() {
      console.log(this.singleForm.id);
      let rst = await this.$http.put(
        `users/${this.singleForm.id}`,
        this.singleForm
      );
      if (rst.meta.status == 200) {
        this.$message.success(rst.meta.msg);
        this.query();
        this.dialogSingle = false;
      }
      console.log(rst);
    },

    // 获取所有角色 活动区域
    async roleName() {
      let rst = await this.$http.get("roles");
      let { data } = rst;
      this.roleNames = data;
      console.log(this.roleNames);
    },

    // 修改角色信息
    async updRole() {
      let rst = await this.$http.put(`users/${this.RoleForm.id}/role`, {
        rid: this.RoleForm.rid,
      });
      console.log(rst);
      if (rst.meta.status == 200) {
        this.$message.success(rst.meta.msg);
        this.query();
      } else {
        this.$message.error(rst.meta.msg);
      }
      this.dialogRole = false;
    },
  },
};
</script>

<style lang="less" scoped>
</style>